<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue.js"></script>
</head>
<body>
    <div id="fd-f">
    <div id='app'>
        <div id='fd-h'>
            汇率查询转换器
        </div>
        <div id='fd-1'>
            持有货币：
            <!-- {{select}} -->
            <select id='fd-1-s' v-model="select1" @change="count" >
                <option v-for="c in countryList" :key="c.id" :value="c.id">
                    {{c.name}}
                </option>
            </select>
        </div>
        <div id='fd-2'>
            目标货币：
            <select id='fd-2-s' v-model="select2" @change="count">
                <option v-for="c in countryList" :key="c.id" :value="c.id">
                    {{c.name}}
                </option>
            </select>
        </div>
        <div id='fd-3'>
            兑换金额：
            <input id='fd-3-i' type="text" v-model="v" />
            <input id='fd-3-b' type="button" @click="count" value="查询计算">
        </div>
        <hr id='fd-x'>
        <div id='fd-4'>
            <div id='fd-4-w'>{{sn1}}兑换{{sn2}}:</div>
            <div id='fd-4-m'>
                <p id='fd-4-1'>{{v}} {{s1}} = {{result}}{{s2}}</p>
                <hr id='fd-4-r'>
                <div id=fd-4-d v-model='r' >
                  <p>当前汇率：{{r}}</p>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- 两个数据关联的是对象数组的key和map里的key,但是两组数据需要的值不同。
    这个select绑定的就是option的value属性的值，所以把option的value换成对象数组里的id,
    可以通过id获得对象数组里的其他属性的值（this.对象数组名[id].属性名）这样可以得到对象数组的key和name;
    之后通过key获得map里的value值进行运算（this.map名.get(key)）-->
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                select1:'1',//countryList中的id
                select2:'3',
                s1:'CNY',//countryList中的key
                s2:'EUR',
                sn1:'人民币',//countryList中的name
                sn2:'欧元',
                v:'',
                result:'',
                r:'',
                key:'',
                countryList:[
                    { id: '1', key: 'CNY', name: 'CNY - 人民币'},
                    { id: '2', key: 'USD', name: 'USD - 美元' },
                    { id: '3', key: 'EUR', name: 'EUR - 欧元' },
                    { id: '4', key: 'GBP', name: 'GBP - 英镑' },
                    { id: '5', key: 'JPY', name: 'JPY - 日元' },
                    { id: '6', key: 'HKD', name: 'HKD - 港币' },
                    { id: '7', key: 'AUD', name: 'AUD - 澳元' },
                    { id: '8', key: 'CAD', name: 'CAD - 加元' },
                ],
                rates: new Map([
                    ["CNY", 1],
                    ["USD", 0.1503],
                    ["EUR", 0.1266],
                    ["GBP", 0.1144],
                    ["JPY", 15.7243],
                    ["HKD", 1.1646],
                    ["AUD", 0.2115],
                    ["CAD", 0.198],
                ]),
    
            },
            methods:{
                count(){
                    this.s1=this.countryList[this.select1-1].key
                    this.s2=this.countryList[this.select2-1].key
                    this.sn1=this.countryList[this.select1-1].name.substring(6)
                    this.sn2=this.countryList[this.select2-1].name.substring(6)
                    this.r=this.rates.get(this.s2)/this.rates.get(this.s1)
                    this.result=(this.v*this.r).toFixed(2)
                }
            },
        })
    </script>
    <style>
        #fd-f{
            /*text-align: center;*/
            width: 100%;
            height: 100%;
        }
        #app{
            width:500px;
            height: 415px;
            margin: auto;
            border: cornflowerblue 2px solid;
            border-radius: 8px;
        }
        #fd-h{
            width: 500px;
            height: 50px;
            font-size: 32px;
            background-color: cornflowerblue;
        }
        #fd-1{
            width: 500px;
            height: 50px;
            margin: 10px auto;
            font-size: 20px;
        }
        #fd-1-s{
            height: 35px;
            width: 380px;
            border-radius: 8px;
        }
        #fd-2{
            width: 500px;
            height: 50px;
            margin: 10px auto;
            font-size: 20px;
        }
        #fd-2-s{
            height: 35px;
            width:380px;
            border-radius: 8px;
        }
        #fd-3{
            width: 500px;
            height: 50px;
            margin: 10px auto;
            font-size: 20px;
        }
        #fd-3-i{
            height: 30px;
            width: 280px;
            border-radius: 8px;
        }
        #fd-3-b{
            width: 90px;
            height: 35px;
            background-color:cornflowerblue;
            font-size: 18px;
            border-radius: 8px;
        }
        #fd-x{
            border:none;
            border-top:1px dashed blue;
            width: 480px;
        }
        #fd-4{
            width: 500px;
            height: 80px;
        }
        #fd-4-w{
          color:cornflowerblue;
          font-size: 20px;
          font-weight: 400;
          line-height: 35px;
        }
        #fd-4-m{
            height: 100px;
            width: 490px;
            border: cornflowerblue 1px solid;
            border-radius: 10px;
            margin: 10px auto;
            text-align: center;
            font-size: 20px;
        }
        #fd-4-1{
            line-height: 20px;
            text-align: center;
            font-size: 20px;
        }
        #fd-4-d{
            line-height: 10px;
            text-align: center;
            font-size: 18px;
            color:cornflowerblue;
        }
    </style>
</body>

</html>